<template>
  <div class="Announcements">
    <a-row :gutter="12" class="aRow-wrapper" style="position: relative">
      <div v-has="'arrow-up:add'" class="add-btn cursor" @click="handelAdd">新增</div>
      <top-title :content="content" :updateTime="true"></top-title>
      <a-row class="container-info-wrapper flex-1 min-h-0">
        <a-col :span="4" class="left-container-bg h-full">
          <div class="left-tree-wrap bg-common-card f1 m-h-0 flex column h-full flex-col">
            <div class="search-group" style="padding: 0.1rem 0.1rem 0 0.2rem">
              <div class="input-wrap" style="width: 100%">
                <div class="input-item" style="padding: 0; width: 100%">
                  <a-input v-model="value" :maxLength="15" placeholder="请输入分类名称" @pressEnter="onSearch">
                    <a-icon slot="prefix" class="search-icon" type="search" />
                    <a-button slot="suffix" class="searchBtn" style="margin-right: 0" type="primary" @click="onSearch"
                      >搜索</a-button
                    >
                  </a-input>
                </div>
              </div>
            </div>
            <div class="tree-wrap f1 m-h-0 flex-1 min-h-0 overflow-auto">
              <a-tree
                :autoExpandParent="autoExpandParent"
                :checkStrictly="checkStrictly"
                :checkedKeys="checkedKeys"
                :expandedKeys="iExpandedKeys"
                :loading="loading"
                :replace-fields="replaceFields"
                :selectedKeys="selectedKeys"
                :treeData="departTree"
                checkable
                multiple
                @check="onSelect"
                @expand="onExpand"
                @select="onSelect"
              >
                <a-icon slot="switcherIcon" type="down" />
                <template #title="{ informationName }">
                  <span v-if="informationName.indexOf(value) > -1">
                    {{ informationName.substr(0, informationName.indexOf(value)) }}
                    <span style="color: #ecf0f1; background: #74b9ff">{{ value }}</span>
                    {{ informationName.substr(informationName.indexOf(value) + value.length) }}
                  </span>
                  <span v-else>{{ informationName }}</span>
                </template>
              </a-tree>

              <div class="drawer-bootom-button">
                <a-dropdown :trigger="['click']" placement="topCenter">
                  <a-menu slot="overlay" class="much">
                    <a-menu-item key="5" @click="expandAll">展开所有</a-menu-item>
                    <a-menu-item key="6" @click="closeAll">合并所有</a-menu-item>
                  </a-menu>
                  <a-button class="searchBtn"> 树操作 <a-icon type="up" /> </a-button>
                </a-dropdown>
              </div>
            </div>
          </div>
        </a-col>
        <a-col :span="20" class="listContent-wrapper">
          <div class="l-w_content">
            <div class="l-w_c_content-wrapper">
              <div class="search-group">
                <div class="input-wrap">
                  <div class="label">模板名称:</div>
                  <div class="input-item">
                    <j-input
                      v-model="queryParam.documentName"
                      :maxLength="30"
                      clearable
                      placeholder="请输入标题关键字"
                    />
                  </div>
                </div>
                <div class="btn-wrap">
                  <a-button class="searchBtn" type="primary" @click="searchQuery()"> 搜索 </a-button>
                  <a-button class="resetBtn" type="primary" @click="searchReset()"> 重置 </a-button>
                </div>
              </div>
              <!-- <a-table
                  rowKey="id"
                  class="tableList"
                  :columns="columns"
                  :dataSource="dataSource"
                  :pagination="ipagination"
                  @change="handleTableChange"
                >
                  <template slot="title" slot-scope="records">
                    <a-tooltip placement="top">
                      <template slot="title">
                        <span>{{ records.title }} </span>
                      </template>
                      <span>{{ records.title }} </span>
                    </a-tooltip>
                  </template>
                  <template slot="action" slot-scope="records">
                    <span class="operation deatil-color" v-has="'arrow-up:detail'" @click="detailHandle(records)"
                      >详情</span
                    >
                    <span class="operation deatil-color" v-has="'arrow-up:edit'" @click="editHandle(records)"
                      >编辑</span
                    >

                    <span class="operation deatil-color" v-has="'arrow-up:edit'" @click="countInfo(records)">统计</span>

                    <span class="operation warnColor" v-has="'arrow-up:delete'" @click="showDelete(records)">删除</span>
                  </template>
                </a-table> -->
              <div class="document-content-wrapper">
                <a-spin :spinning="loading">
                  <div class="item-info-wrapper-box">
                    <div v-for="(item, index) in dataSource" :key="index" class="item-info">
                      <div class="item-info-wrapper">
                        <div class="t-info">
                          <div class="t-name">《{{ item.documentName }}》</div>
                          <a-dropdown placement="bottomCenter">
                            <div class="more-t deatil-color">⋮</div>
                            <a-menu slot="overlay">
                              <a-menu-item>
                                <a class="deatil-color" href="javascript:;" @click="handelDetail(item)">详情</a>
                              </a-menu-item>
                              <a-menu-item>
                                <a class="deatil-color" href="javascript:;" @click="handleCopy(item)">一键复制</a>
                              </a-menu-item>
                              <a-menu-item>
                                <a class="deatil-color" href="javascript:;" @click="editHandle(item)">编辑</a>
                              </a-menu-item>
                              <a-menu-item>
                                <a class="deatil-color" href="javascript:;" @click="handleStatistic(item)">统计</a>
                              </a-menu-item>
                              <a-menu-item>
                                <a class="deatil-color" href="javascript:;" @click="handleDisable(item)">禁用</a>
                              </a-menu-item>
                              <a-menu-item>
                                <a class="operation warnColor" href="javascript:;" @click="showDelete(item)">删除</a>
                              </a-menu-item>
                            </a-menu>
                          </a-dropdown>
                        </div>
                        <div class="t-content">
                          <div class="t-item">
                            <div class="t-left">
                              <div class="c-label">版本总数：</div>
                              <div class="c-value">{{ item.totalNumber }}</div>
                            </div>
                            <div class="deatil-color" @click="handleAddVersion(item)">新增</div>
                          </div>
                          <div class="t-item">
                            <div class="t-left">
                              <div class="c-label">生效版本：</div>
                              <div class="c-value">
                                {{ versionName(item) }}
                              </div>
                            </div>
                            <div
                              class="deatil-color"
                              @click="previewInfo(item)"
                              v-if="get(item, 'sysDocumentVersion.id', false)"
                            >
                              预览
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </a-spin>
              </div>
              <div class="pagination-info">
                <a-pagination
                  v-bind="ipagination"
                  @change="handlePaginationChange"
                  @showSizeChange="handlePaginationSizeChange"
                />
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </a-row>
    <add-modal ref="addEditAddress" :curr-selected="currSelected" @refresh="searchQuery()"></add-modal>

    <allMessage
      ref="allMessage"
      :publicVisible="publicVisible"
      :title="title"
      :content="contentStr"
      @cancel="publicVisible = false"
      @tipMessage="tipMessage"
    ></allMessage>
    <StatisticModel ref="statisticModelRef" />
    <Copy ref="copy" />
    <detail-add-content ref="detailAddContent" @refresh="searchQuery"></detail-add-content>
  </div>
</template>

<script>
import addModal from './modules/addContent'
import topTitle from '@/components/topTitle'
import JInput from '@/components/jeecg/JInput'
import allMessage from '@/components/allMessage'

import { getAction } from '@/api/manage'
import { documentDelete } from '@/api/document'
import { documentPage, documentUpdateDisable } from '../../api/api'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import Copy from './modules/copy.vue'
import StatisticModel from './modules/statisticModel.vue'
import detailAddContent from '@views/officialDocManagement/modules/detailAddContent.vue'
import { OFFICIAL_DOCUMENT_MANAGEMENT_PARAMS } from '@/store/mutation-types'
import { get } from 'lodash-es'

export default {
  name: 'Announcements',
  components: { detailAddContent, topTitle, allMessage, JInput, addModal, Copy, StatisticModel },
  mixins: [JeecgListMixin],
  data() {
    return {
      content: [['公文管理']],
      url: { list: '/sys/document/page' },
      publicVisible: false,
      columns: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '模板名称',
          dataIndex: 'documentName',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '备注信息',
          dataIndex: 'memo',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '创建用户',
          dataIndex: 'createBy',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
          ellipsis: true,
          align: 'center',
        },
      ],
      showSingList: false,
      documentName: '',
      value: '',

      // 左侧树
      dataList: [],
      currSelected: {},
      selectedKeys: [],
      checkedKeys: [],
      departTree: [],
      iExpandedKeys: [],
      checkStrictly: true,
      replaceFields: {
        key: 'id',
        title: 'informationName',
      },
      autoExpandParent: true,

      disableMixinCreated: true,
      title: '',
      contentStr: '',
    }
  },
  activated() {
    this.loadTree()
    if (this.queryParam.industryInformationId) {
      this.loadData()
    }
  },
  methods: {
    get,
    // 左侧树
    async loadTree() {
      this.loading = true
      let { result } = await getAction('/industry/information/tree')
      this.allTreeKeys = []
      this.departTree = result
      this.getAllKeys(result) // * 用于右下角树操作功能
      this.generateList(this.departTree) // * 用作搜索 书中包含关键字的方法
      this.loading = false
    },

    expandAll() {
      this.iExpandedKeys = this.allTreeKeys
    },
    onExpand(expandedKeys) {
      this.iExpandedKeys = expandedKeys
      this.autoExpandParent = false
    },

    // * 树的筛选方法 开始
    onSearch() {
      const expanded = this.dataList
        .map((item) => {
          if (item.informationName.indexOf(this.value) > -1) {
            return this.getParentKey(item.id, this.departTree)
          }
          return null
        })
        .filter((item, i, self) => {
          if (item && self.indexOf(item) === i) {
            return item
          }
        })
      this.iExpandedKeys = expanded
      this.autoExpandParent = true
    },
    onSelect(selectedKeys, info) {
      // 如果不是最后一级，则返回
      let record = info.node.dataRef
      if (record.isChildren === true) {
        return
      }
      this.currSelected = record
      this.queryParam.industryInformationId = record.id
      this.loadData()
      this.checkedKeys = [record.id] // ! 设置勾选
      this.selectedKeys = [record.id]
    },
    closeAll() {
      this.iExpandedKeys = []
    },
    getAllKeys(tree) {
      tree.forEach((item) => {
        if (item.id) this.allTreeKeys.push(item.id)
        if (item.children) {
          this.getAllKeys(item.children)
        }
      })
    },
    generateList(tree) {
      for (let i = 0; i < tree.length; i++) {
        const node = tree[i]
        const id = node.id
        const informationName = node.informationName
        this.dataList.push({
          id,
          informationName: informationName,
        })
        if (node.children) {
          this.generateList(node.children)
        }
      }
    },

    handelAdd() {
      // 判断必须 选择到 最底级
      if (this.currSelected.isChildren !== false) {
        this.$message.warn('请选择具体行业类型！')
        return
      }
      this.$refs.addEditAddress.show()
    },
    editHandle(records) {
      this.$refs.addEditAddress.show(records)
    },

    countInfo(records) {
      this.showSingList = true
      this.documentName = records.documentName
      this.queryParam2 = { documentId: records.id }
      this.searchHandle()
    },

    closeSign() {
      this.queryParam2 = {}
      this.showSingList = false
    },

    resetHandle() {
      let documentId = this.queryParam2.documentId
      this.queryParam2 = { documentId }
      this.searchHandle()
    },

    async searchHandle() {
      let { result } = await getAction('/sys/document_company/statistics_page', this.queryParam2)
      this.dataSource2 = result.records
      this.ipagination.total = result.total
    },

    handleTableChange2(pagination, filters, sorter) {
      // console.log(pagination, filters, sorter)
      this.queryParam2.pageNo = pagination.current
      this.queryParam2.pageSize = pagination.pageSize
    },

    detailHandle(records) {
      this.$router.push({
        path: '/officialDocManagement/docDetail',
        query: { id: records.id, documentName: records.documentName, memo: records.memo },
      })
    },

    showDelete(records) {
      this.publicVisible = true
      this.title = '删除'
      this.contentStr = '确定删除该信息么？'
      this.$refs.allMessage.show(records)
    },

    tipMessage(records) {
      if (this.title == '删除') {
        documentDelete({ id: records.id }).then((res) => {
          this.$message.success(res.message)
          this.publicVisible = false
          this.searchQuery()
        })
      } else if (this.title == '禁用') {
        const params = {
          documentId: records.id,
        }
        documentUpdateDisable(params).then((res) => {
          this.$message.success(res.message)
          this.publicVisible = false
          this.searchQuery()
        })
      }
    },
    handelDetail(records) {
      this.$router.push({
        path: '/officialDocManagement/docDetail',
        query: records,
      })
    },
    handlePaginationChange(page, pageSize) {
      this.ipagination.current = page
      this.loadData()
    },
    handlePaginationSizeChange(current, size) {
      console.log(current, size)
    },
    handleCopy(records) {
      // 判断如果下面没有版本则不能复制
      if (!records.sysDocumentVersion) {
        this.$message.warn('当前公文下没有生效的版本，不能进行复制操作！')
        return
      }
      this.$refs.copy.show(records)
    },
    handleStatistic(records) {
      this.$refs.statisticModelRef.show(records)
    },
    handleAddVersion(records) {
      const recordsCopy = {
        ...records,
        documentId: records.id,
      }
      delete recordsCopy.id
      this.$refs.detailAddContent.show(recordsCopy)
    },
    previewInfo(records) {
      // 保存一下当前 页面的剩余参数
      const query = {
        id: records.sysDocumentVersion.id,
        policeAgencyName: records.policeAgencyId_dictText,
      }
      console.log(query)

      this.$router.push({
        path: '/officialDocManagement/preview',
        query: query,
      })
    },
    versionName(item) {
      if (!item.sysDocumentVersion) {
        return '无'
      } else {
        return `${get(item, 'sysDocumentVersion.fileName')}-${get(item, 'sysDocumentVersion.createTime')}`
      }
    },
    handleDisable(records) {
      this.publicVisible = true
      this.title = '禁用'
      this.contentStr = '请确认是否禁用该模板下生效的版本？'
      this.$refs.allMessage.show(records)
    },
  },
}
</script>

<style lang="less" scoped>
.Announcements {
  width: 100%;
  height: 100%;
  background: var(--theme-content-bg);
  display: flex;
  .container-info-wrapper {
    flex: 1;
    min-height: 0;
  }
  .left-container-bg {
    background: var(--theme-container-bg);
    height: 100%;
  }
  .tree-wrap {
    height: 100%;
    min-height: 0;
    .ant-tree {
      height: 100%;
      overflow: auto;
    }
  }

  /deep/.ant-spin-nested-loading {
    width: 100%;
  }

  .left-tree-wrap {
    position: relative;
    height: 100%;

    .btn-group {
      padding: 0.2rem 0 0 0.2rem;
      .btn-common {
        width: 1.2rem;
        height: 0.4rem;
        line-height: 0.4rem;
        text-align: center;
        background: #1388ff;
        border-radius: 0.04rem;
        font-size: 0.16rem;
        font-weight: bold;
        color: #0b3f73;
        cursor: pointer;
        &:nth-child(2) {
          margin-left: 0.2rem;
        }
      }
    }

    .drawer-bootom-button {
      position: absolute;
      right: 0.1rem;
      bottom: 0.1rem;
      border-radius: 0.04rem;
    }
  }
  .document-content-wrapper {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
    align-content: flex-start;
    padding: 0 0.35rem;
    .item-info-wrapper-box {
      width: 100%;
      display: flex;
      flex-wrap: wrap;

      .item-info {
        width: 33.33%;
        margin-bottom: 0.24rem;
        color: #fff;
        &:nth-child(3n) {
          .item-info-wrapper {
            margin-right: 0;
          }
        }
        .item-info-wrapper {
          margin-right: 0.17rem;
          border: 1px solid var(--theme-input-border);
          background: var(--theme-content-item-bg);

          .t-info {
            height: 69px;
            padding: 0 14px;
            font-size: 0.16rem;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            &:before {
              content: '';
              width: 94%;
              height: 1px;
              background: var(--theme-input-border);
              position: absolute;
              left: 50%;
              transform: translateX(-50%);
              bottom: 0;
            }
            .more-t {
              font-size: 24px;
            }
          }
        }
      }
    }

    .t-content {
      padding: 20px;
      font-size: 0.14rem;
      .t-item {
        display: flex;
        justify-content: space-between;
        .t-left {
          display: flex;
        }
      }
      .c-label {
        color: #8fbbff;
      }
    }
  }

  .pagination-info {
    text-align: right;
    padding: 10px 0;
  }

  .l-w_c_content-wrapper {
    height: 100%;
    background: var(--theme-container-bg);
    display: flex;
    flex-direction: column;
  }

  .aRow-wrapper {
    height: auto;
    overflow: scroll;
    display: flex;
    flex-direction: column;
  }
  .pageinfo {
    width: 100%;
    height: 100%;
  }

  .signList {
    width: 800px;
    height: auto;
    overflow: scroll;
    background: var(--theme-container-bg);
    margin-top: 0.66rem;

    .singTitle {
      height: 64px;
      padding: 0 13px;
      line-height: 64px;
      font-size: 16px;
      font-weight: 500;
      color: var(--theme-modal-label-value-color);
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #0d4d8b;
    }
  }
}
</style>

<style lang="less" scoped>
.ant-calendar-year-panel {
  background: #0b3761;

  .ant-calendar-year-panel-header {
    border-bottom: 1px solid #79afeb;
  }
  .ant-calendar-year-panel-decade-select {
    color: #79afeb;
  }

  .ant-calendar-year-panel-year {
    color: #79afeb;
  }

  .ant-calendar-year-panel-year:hover {
    background: #79afeb;
    color: #0b3761;
  }
}
</style>
